<template>
	<view>
		<u-navbar
			title="认养订单"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="background-color: #fff;">
			<u-tabs :scrollable="false" :current="current" :list="list1" @click="tabClick" :lineColor="appColor" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
		</view>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else-if="!loading && list.length === 0">
				<u-empty
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</template>
			<template v-else-if="!loading && list.length > 0">
				<view class="foster-order-item" v-for="order in list" :key="order.id" @click="checkOrder(order)">
					<view class="foster-order-item-t">
						<view class="foster-order-item-t-l">
							<u--image mode="aspectFill" radius="8rpx" :src="appInfo.logo[0].url" width="48rpx" height="48rpx"></u--image>
							<view class="foster-order-item-t-l-text">{{appInfo.name}}</view>
						</view>
						<view class="foster-order-item-t-r" :style="{color: color[order.payStatus_dictText]}">{{order.payStatus_dictText}}</view>
					</view>
					<view class="foster-order-item-m">
						<u--image mode="aspectFill" radius="8rpx" :src="order.adoptProject.image[0].url" width="160rpx" height="160rpx"></u--image>
						<view class="foster-order-item-m1">
							<view class="foster-order-item-m1-c u-line-2">{{order.adoptProject.name}}</view>
							<view class="foster-order-item-m1-c1">{{order.adoptSku.sku}}</view>
						</view>
						<view class="foster-order-item-m2">
							<view class="foster-order-item-m2-t">
								<text>&yen;</text>
								<text style="font-size: 30rpx;font-weight: bold;color: #333;">{{order.payPrice}}</text>
							</view>
							<text>共{{order.buyCount}}{{order.unit}}</text>
						</view>
					</view>
					<!-- <view class="foster-order-item-b">
						<view class="foster-order-item-b-btn">
							<text>立即支付</text>
						</view>
					</view> -->
				</view>
				<u-loadmore :status="status" />
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {adoptOrderList} from '@/api/me.js'
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				list1: [
					{name: '全部', key: -1},
					{name: '认养中', key: 2},
					{name: '配送中', key: 3},
					{name: '已完成', key: 4},
				],
				list: [],
				loading: true,
				current: 0,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 10,
				color: {
					"待支付": '#f40215',
					"已支付": '#53c21d',
					"已退款": '#f40215',
					"已取消": '#767a82',
					"配送中": '#53c21d',
					"已完成": '#53c21d',
				}
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 + 'px';
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			// 查看订单
			// 查看订单
			checkOrder({id}) {
				this.$cuNavigateTo(`/pages/me/fosterOrderDetail?id=${id}&index=0`)
			},
			tabClick({index}) {
				this.current = index;
				this.pageNo = 1;
				this.getList();
			},
			getList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orderStatus: this.current+1
				}
				if(this.current === 0) {
					delete postObj.orderStatus
				}
				adoptOrderList(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.list = empty.concat(records);
					} else {
						this.list = this.list.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.foster-order-item {
		padding: 32rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 32rxp auto;
		&:last-child {
			margin-bottom: 0;
		}
		.foster-order-item-t {
			display: flex;
			align-items: center;
			.foster-order-item-t-l {
				flex: 1;
				display: flex;
				align-items: center;
				overflow: hidden;
				.foster-order-item-t-l-text {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 28rpx;
					color: #000;
					padding: 0 16rpx;
				}
			}
			.foster-order-item-t-r {
				width: 96rpx;
				font-size: 24rpx;
				color: #666;
				text-align: right;
			}
		}
		.foster-order-item-m {
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 16rpx 0;
			.foster-order-item-m1 {
				height: 160rpx;
				flex: 1;
				padding: 0 16rpx;
				font-size: 26rpx;
				color: #333;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.foster-order-item-m1-c {
					width: 100%;
					margin-bottom: 16rpx;
				}
				.foster-order-item-m1-c1 {
					color: #666;
					font-size: 24rpx;
				}
			}
			.foster-order-item-m2 {
				width: 132rpx;
				font-size: 24rpx;
				color: #666;
				text-align: right;
				.foster-order-item-m2-t {
					color: #000;
					font-size: 28rpx;
				}
			}
		}
		.foster-order-item-b {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			.foster-order-item-b-btn {
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #000;
				border: 2rpx solid #ddd;
				border-radius: 36rpx;
				padding: 4rpx 24rpx;
			}
		}
	}
</style>